// 引入 React 及其 Hooks
import React, { useState, useEffect } from "react";

// 定义 VoiceAssistant 组件，使用 React.FC 类型注解
const VoiceAssistant: React.FC = () => {
    // 定义语音识别状态
    // isListening 用于记录是否正在监听语音，初始值为 false
    const [isListening, setIsListening] = useState<boolean>(false);
    // recognizedText 用于存储识别到的文本，初始值为空字符串
    const [recognizedText, setRecognizedText] = useState<string>("");
    // responseText 用于存储助手的响应文本，初始值为空字符串
    const [responseText, setResponseText] = useState<string>("");
    // isSpeaking 用于记录是否正在播放语音，初始值为 false
    const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
    // error 用于存储可能出现的错误信息，初始值为 null
    const [error, setError] = useState<string | null>(null);

    // 初始化 SpeechRecognition
    useEffect(() => {
        // 检查浏览器是否支持 SpeechRecognition API
        // 不同浏览器可能使用不同的前缀，这里兼容了标准的 SpeechRecognition 和 WebKit 内核浏览器的 webkitSpeechRecognition
        const SpeechRecognition =
            (window as any).SpeechRecognition ||
            (window as any).webkitSpeechRecognition;

        // 如果浏览器不支持 SpeechRecognition API，设置错误信息并返回
        if (!SpeechRecognition) {
            setError("您的浏览器不支持 SpeechRecognition API。");
            return;
        }

        // 创建 SpeechRecognition 实例
        const recognition = new SpeechRecognition();
        // 设置为连续识别模式，即可以持续识别语音输入
        recognition.continuous = true;
        // 允许临时结果，这样在识别过程中就可以获取到中间的识别结果
        recognition.interimResults = true;
        // 设置识别的语言为中文
        recognition.lang = "zh-CN";

        // 语音识别开始时的回调函数
        recognition.onstart = () => {
            console.log("语音识别已启动");
            // 更新 isListening 状态为 true
            setIsListening(true);
        };

        // 语音识别结束时的回调函数
        recognition.onend = () => {
            console.log("语音识别已停止");
            // 更新 isListening 状态为 false
            setIsListening(false);
        };

        // 语音识别结果返回时的回调函数
        recognition.onresult = (event: any) => {
            // 获取当前识别的文本
            const currentTranscript = event.results[event.resultIndex][0].transcript;
            console.log("识别到的文本:", currentTranscript);
            // 更新识别到的文本状态
            setRecognizedText(currentTranscript);

            // 根据识别到的文本触发不同的响应
            if (currentTranscript.toLowerCase().includes("小维")) {
                // 如果识别到的文本包含 "小维"，调用 respondToCommand 函数，传入响应文本 "我在呢"
                respondToCommand("我在呢");
            } else if (currentTranscript.toLowerCase().includes("你叫什么")) {
                // 如果识别到的文本包含 "你叫什么"，调用 respondToCommand 函数，传入响应文本 "我叫小维"
                respondToCommand("我叫小维");
            } else if (currentTranscript.toLowerCase().includes("八维有哪些专业")) {
                // 如果识别到的文本包含 "八维有哪些专业"，调用 respondToCommand 函数，传入相应的专业列表
                respondToCommand(
                    "网站工程，人工智能，物联网，网络工程、全栈开发、游戏设计、元宇宙、云计算、大数据",
                );
            } else if (currentTranscript.toLowerCase().includes("你知道八维吗")) {
                // 如果识别到的文本包含 "你知道八维吗"，调用 respondToCommand 函数，传入响应文本
                respondToCommand("八维是中国领先的职业教育培训机构");
            } else if (currentTranscript.toLowerCase().includes("你家在哪")) {
                // 如果识别到的文本包含 "你家在哪"，调用 respondToCommand 函数，传入响应文本
                respondToCommand("北京昌平");
            }
        };

        // 语音识别错误时的回调函数
        recognition.onerror = (event: any) => {
            console.error("语音识别错误:", event.error);
            // 设置错误信息
            setError("语音识别出错，请检查麦克风权限或重试。");
            // 停止监听
            setIsListening(false);
        };

        // 根据 isListening 状态启动或停止语音识别
        if (isListening) {
            console.log("启动语音识别...");
            // 启动语音识别
            recognition.start();
        } else {
            console.log("停止语音识别...");
            // 停止语音识别
            recognition.stop();
        }

        // 组件卸载时停止语音识别
        return () => {
            console.log("组件卸载，停止语音识别");
            recognition.stop();
        };
    }, [isListening]); // 依赖 isListening 状态，当 isListening 状态改变时，重新执行 useEffect 中的代码

    // 使用 SpeechSynthesis API 来响应用户
    const respondToCommand = (response: string) => {
        console.log("助手响应:", response);
        // 更新助手的响应文本状态
        setResponseText(response);

        // 创建 SpeechSynthesisUtterance 实例，用于将文本转换为语音
        const speech = new SpeechSynthesisUtterance(response);
        // 设置语音的语言为中文
        speech.lang = "zh-CN";

        // 语音播放开始时的回调函数
        speech.onstart = () => {
            console.log("语音播放已启动");
            // 更新 isSpeaking 状态为 true
            setIsSpeaking(true);
        };

        // 语音播放结束时的回调函数
        speech.onend = () => {
            console.log("语音播放已停止");
            // 更新 isSpeaking 状态为 false
            setIsSpeaking(false);
        };

        // 语音播放错误时的回调函数
        speech.onerror = (event: any) => {
            console.error("语音播放错误:", event.error);
            // 设置错误信息
            setError("语音播放出错，请重试。");
        };

        // 播放语音
        window.speechSynthesis.speak(speech);
    };

    // 切换语音监听状态的按钮
    const toggleListening = () => {
        console.log("切换语音监听状态，当前状态:", isListening);
        // 切换 isListening 状态
        setIsListening((prev) => !prev);
    };

    return (
        <div style={{ textAlign: "center", marginTop: "20px" }}>
            {/* 错误提示 */}
            {error && <p style={{ color: "red" }}>{error}</p>}

            {/* 按钮用于启动或停止语音识别 */}
            <button
                onClick={toggleListening}
                style={{ padding: "10px 20px", fontSize: "16px" }}
            >
                {isListening ? "暂停" : "开始"}
            </button>

            {/* 显示识别到的文本 */}
            <p>识别: {recognizedText}</p>

            {/* 显示助手的响应文本 */}
            <p>助手: {responseText}</p>

            {/* 显示语音播放状态 */}
            <p>{isSpeaking ? "正在播放语音..." : "语音播放已停止"}</p>
        </div>
    );
};

// 导出 VoiceAssistant 组件
export default VoiceAssistant;